<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div">
          <img src="../../../assets/返回.png" @click="back()" alt="">
          <span class="solid" @click="back()">返回</span>
        </div>
        <div class="div">
          <span v-show="disable == false">上传{{typeTitle}}相关资料</span>
          <span v-show="disable == true">查看相关资料</span>
<!--          <span v-show="type == 1">图文咨询</span>-->
<!--          <span v-show="type == 2">视频咨询</span>-->
        </div>
        <div class="div">
          <span class="solid" v-show="disable == false" @click="keep()">保存</span>
        </div>
      </header>
      <div class="menu" style="display: none">
        <ul>
          <li
            @click="clickMenu(index)"
            v-for="(item, index) in menuList" :key="index"
              :class="[index == menuIndex ? 'select' : '']">
            {{item}}
          </li>
        </ul>
      </div>
    </div>
    <div class="box" v-show="menuIndex == 0">
      <div class="title">
        <span style="display: flex;
  font-size: 15px;font-weight: bold">
            <a class="hengGang"></a>上传{{typeTitle}}相关的资料图片(最多上传9张图片)
        </span>
<!--        <span style="font-size: 11px;color: #333">照片仅自己和医生可见</span>-->
      </div>
      <div class="imgDiv">
        <van-uploader v-model="fileList"
                      max-count="9"
                      :upload-icon="require('../../../assets/上传图片.png')"
                      multiple="true"
                      @delete="Delete"
                      :deletable="!disable"
                      :before-delete="beforeDel"
                      image-fit="cover"
                      accept="image/*"
                      preview-size="28vw"
                      :after-read="updateFile"
        />
      </div>
      <div class="tishi" style="text-indent: 1em">
<!--         v-show="disable == false && fileList.length <= 0"-->
        为确保您的隐私安全，上传的图片资料仅您和提供咨询人可见。
      </div>
    </div>
    <div class="title" style="margin-top: 5px;align-items: center">
        <span style="display: flex;
  align-items: center;
  font-size: 15px;font-weight: bold">
            <a class="hengGang"></a>健康档案调阅
        </span>
        <span style="font-size: 15px">已开启</span>
    </div>
    <div style="background: #fff;font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
padding: 0 15px;box-sizing: border-box;line-height: 1.8;text-indent: 1em">
      为方便就诊，您的健康档案调阅功能默认开启，提供咨询人可以调阅。为保证您的隐私安全，档案信息仅您和提供咨询人可见。
    </div>
    <div class="content content4"  v-show="menuIndex == 1">
      <div class="table_all">
        <div class="table_top">
          <table width="100%"
                 border="0"
                 cellspacing="0"
                 cellpadding="0"
          >
            <tr>
              <th width="50">
                <img style="width: 13px;height: 13px;margin: 0 auto"
                     src="../../../assets/sortHL.png" alt="">
              </th>
              <th width="50">序号</th>
              <th width="170">检查项目</th>
              <th width="100">金额(元)</th>
              <th width="150">检查结果</th>
            </tr>
          </table>
        </div>
        <div class="table_bottom">
          <table width="100%"
                 border="0"
                 cellspacing="0"
                 cellpadding="0">
            <tr v-for="(item, index) in jianChaList" :key="index"
                @click.stop="jianChaSel(item, index)">
              <td width="50" >
                <img v-if="item.show == true" style="width: 13px;height: 13px;margin: 0 auto"
                     src="../../../assets/题目选择.png" alt="">
                <img v-else style="width: 13px;height: 13px;margin: 0 auto"
                     src="../../../assets/题目未选择.png" alt="">
              </td>
              <td width="50">{{index + 1}}</td>
              <td width="170" style="text-align: left">{{item.xiangmu}}</td>
              <td width="100" @click.stop="">
                <input type="number"
                       autofocus="autofocus"
                       v-model="item.money"
                       readonly
                       style="width: 100%;border: none;height: 100%;text-align: center">
<!--                @keyup="PriceKeyup()"-->
              </td>
              <td width="150" >
                <a style="height: 18px;display: flex;
                align-items: center;
                justify-content: center;
                box-sizing:border-box;
                background: rgba(243, 152, 0, 0.1);
                border-radius: 9px;
                color: #F39800;" @click.stop="jianChaLishi(item)">查看结果</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="width:100%;position: fixed;bottom: 50px;background: white">
        <div style="height: 44px;display: flex;align-items: center;justify-content: space-between" class="botttom_div">
          <span style="font-size: 13px;
                      display: flex;
                      align-items: center;
                      color: #333333;">
          <img style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/查看金额.png" alt="">
          合计金额</span>
          <span class="price">{{checkmoney}}</span>
        </div>
        <!--          保存/修改状态-->
        <div style="width:100%;height: 60px;display: flex;align-items: center">
          <button :disabled="disable" class="addBtn" @click="userHistoryJC()">
            <img class="diaoyongImg" src="../../../assets/调用历史记录.png" alt="">
            <span >调用历史记录</span>
          </button>
<!--          <button :disabled="disable" v-if="isJCdelBtn == true" @click.stop="popChadelshow = true" class="addBtn">-->
<!--            <span>删除信息</span>-->
<!--          </button>-->
<!--          <button :disabled="disable" v-else @click="addJianCha()"-->
<!--                  class="addBtn">-->
<!--            <img src="../../../assets/白添加.png" style="width: 13px;height: 13px;" alt="">-->
<!--            <span>新增检查信息</span>-->
<!--          </button>-->
        </div>
      </div>
    </div>
    <div class="content "  v-show="menuIndex == 2">
      <div class="table_all">
        <div class="table_top">
          <table width="100%"
                 border="0"
                 cellspacing="0"
                 cellpadding="0"
          >
            <tr>
              <th width="50">
                <img style="width: 13px;height: 13px;margin: 0 auto"
                     src="../../../assets/sortHL.png" alt="">
              </th>
              <th width="50">序号</th>
              <th width="170">检验项目</th>
              <th width="100">金额(元)</th>
              <th width="150">检验结果</th>
            </tr>
          </table>
        </div>
        <div class="table_bottom">
          <table width="100%"
                 border="0"
                 cellspacing="0"
                 cellpadding="0">
            <tr v-for="(item, index) in jianYanList" :key="index" @click="jianYanSel(item, index)">
              <td width="50">
                <img v-if="item.show == true" style="width: 13px;height: 13px;margin: 0 auto"
                     src="../../../assets/题目选择.png" alt="">
                <img v-else style="width: 13px;height: 13px;margin: 0 auto"
                     src="../../../assets/题目未选择.png" alt="">
              </td>
              <td width="50">{{index+1}}</td>
              <td width="170" style="text-align: left">{{item.xiangmu}}</td>
              <td width="100" @click.stop="">
                <input type="number"
                       id="jianYan"
                       autofocus="autofocus"
                       v-model="item.money"
                       readonly
                       style="width: 100%;border: none;height: 100%;text-align: center"
                >
<!--                @keyup="JianYanPriceKeyup()"-->
              </td>
              <td width="150" @click.stop="jianYanLishi(item)">
                <a style="
                height: 18px;display: flex;
                align-items: center;
                justify-content: center;
                box-sizing:border-box;
                background: rgba(243, 152, 0, 0.1);
                border-radius: 9px;
                color: #F39800;">查看结果</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="width:100%;position: fixed;bottom: 50px;background: white">
        <div style="height: 44px;display: flex;align-items: center;justify-content: space-between" class="botttom_div">
          <span style="font-size: 13px;
          display: flex;
          align-items: center;
          color: #333333;">
            <img style="width: 15px;height: 15px;margin-right: 5px" src="../../../assets/查看金额.png" alt="">
            合计金额</span>
          <span class="price">{{inspermoney}}</span>
        </div>
        <div style="width:100%;height: 60px;display: flex;align-items: center" >
          <button :disabled="disable"  class="addBtn" @click.stop="userHistoryJY">
            <img class="diaoyongImg" src="../../../assets/调用历史记录.png" alt="">
            <span>调用历史记录</span>
          </button>
<!--          <button :disabled="disable" v-if="isJYdelBtn == true" @click.stop="popYandelshow = true" class="addBtn">-->
<!--            <span>删除信息</span>-->
<!--          </button>-->
<!--          <button :disabled="disable" v-else @click="addJianYan()"-->
<!--                  class="addBtn">-->
<!--            <img src="../../../assets/白添加.png" style="width: 13px;height: 13px;" alt="">-->
<!--            <span>新增检验信息</span>-->
<!--          </button>-->
        </div>
      </div>
    </div>
    <van-dialog v-model="popChadelshow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确定删除该项目吗？"
                @confirm="ChadelConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="popYandelshow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确定删除该项目吗？"
                @confirm="YandelConfirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="backShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="当前图片还未保存确认退出吗？"
                @confirm="backConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
import lrz from 'lrz'

export default {
  name: 'Upload',
  data () {
    return {
      menuList: ['病患处照片', '检查记录', '检验记录'],
      menuIndex: 0,
      fileList: [],
      isSend: true,
      imgList: [],
      imgShow: false,
      NowJianChaID: '',
      userid: '',
      jianChaList: [],
      jianYanList: [],
      isJCdelBtn: false,
      JCdelIndex: 0,
      popChadelshow: false,
      checkmoney: 0,
      inspermoney: 0,
      type: this.$route.query.type,
      isJYdelBtn: false,
      JYdelIndex: 0,
      popYandelshow: false,
      PATIENT_USER_ID: '', // 被服务人userid
      maxCount: 9,
      disable: false,
      backShow: false
    }
  },
  mounted () {
    if (sessionStorage.getItem('userid') !== null) {
      this.userid = sessionStorage.getItem('userid')
    }
    if (sessionStorage.getItem('SecondData') !== null) {
      this.PATIENT_USER_ID = JSON.parse(sessionStorage.getItem('SecondData')).PATIENT_USER_ID
    }
    if (sessionStorage.getItem('tuWenData') !== null) {
      var data = JSON.parse(sessionStorage.getItem('tuWenData'))
      this.jianChaList = data.jianChaList
      this.jianYanList = data.jianYanList
      this.menuIndex = data.menuIndex
      this.fileList = data.fileList
      this.imgList = data.imgList
      this.checkmoney = data.checkmoney
      this.inspermoney = data.inspermoney
      this.isJYdelBtn = data.isJYdelBtn
      this.isJCdelBtn = data.isJCdelBtn
      if (data.maxCount !== null && data.maxCount !== undefined && data.maxCount !== '') {
        this.maxCount = data.maxCount
      }
      if (data.PATIENT_USER_ID !== null && data.PATIENT_USER_ID !== undefined && data.PATIENT_USER_ID !== '') {
        this.PATIENT_USER_ID = data.PATIENT_USER_ID
      }
      if (data.disable !== null && data.disable !== undefined && data.disable !== '') {
        this.disable = data.disable
        if (this.disable == true) {
          window.title = '查看上传资料'
        }
      }
    }
    // 检验项目价格合计
    this.JianYanPriceKeyup()
    // 检查项目价格合计
    this.PriceKeyup()
  },
  computed: {
    typeTitle: function () {
      let text
      if (this.type == 1) {
        text = '图文咨询'
        document.title = '上传图文咨询相关资料'
      } else if (this.type == 2) {
        text = '视频咨询'
        document.title = '上传视频咨询相关资料'
      }
      return text
    }
  },
  methods: {
    // 检验删除确认按钮
    YandelConfirm () {
      this.jianYanList.splice(this.JYdelIndex, 1)
      this.JianYanPriceKeyup()
      this.isJYdelBtn = false
    },
    // 检验选择行
    jianYanSel (item, index) {
      if (item.show) {
        // 新增按钮展示
        item.show = false
        this.isJYdelBtn = false
      } else {
        for (var i = 0; i < this.jianYanList.length; i++) {
          this.jianYanList[i].show = false
        }
        // 删除按钮展示
        item.show = true
        this.isJYdelBtn = true
        this.JYdelIndex = index
      }
    },
    // 保存
    keep () {
      if (this.fileList.length <= 0) {
        Toast('请先上传图片')
        return false
      }
      if (this.isSend === false) {
        Toast('图片上传中，请稍后')
        return false
      }
      var data = JSON.parse(sessionStorage.getItem('DATA'))
      data.Iimg = []
      for (var i = 0; i < this.imgList.length; i++) {
        var obj = {
          picture: this.imgList[i]
        }
        data.Iimg.push(obj)
      }
      this.fileList = []
      for (var k = 0; k < this.imgList.length; k++) {
        var file = { url: this.imgList[k], isImage: true }
        this.fileList.push(file)
        // imgList.push(res.data.data.Iimg[i].img_url)
      }
      sessionStorage.setItem('DATA', JSON.stringify(data))
      // for (var k = 0; k < this.jianChaList.length; k++) {
      //   if (this.jianChaList[k].money === '') {
      //     Toast('请输入' + this.jianChaList[k].xiangmu + '的金额')
      //     return
      //   }
      //   var ott = {
      //     id: this.jianChaList[k].id,
      //     money: this.jianChaList[k].money,
      //     lishi: this.jianChaList[k].lishi
      //   }
      //   data.Clist.push(ott)
      // }
      // for (var f = 0; f < this.jianYanList.length; f++) {
      //   if (this.jianYanList[f].money === '') {
      //     Toast('请输入' + this.jianYanList[f].xiangmu + '的金额')
      //     return
      //   }
      //   var jy = {
      //     id: this.jianYanList[f].id,
      //     money: this.jianYanList[f].money,
      //     lishi: this.jianYanList[f].lishi
      //   }
      //   data.Jlist.push(jy)
      // }

      var vgg = {
        jianChaList: this.jianChaList,
        jianYanList: this.jianYanList,
        menuIndex: this.menuIndex,
        fileList: this.fileList,
        imgList: this.imgList,
        checkmoney: this.checkmoney,
        inspermoney: this.inspermoney,
        isJYdelBtn: this.isJYdelBtn,
        isJCdelBtn: this.isJCdelBtn
      }
      sessionStorage.setItem('tuWenData', JSON.stringify(vgg))
      Toast('保存成功')
      this.$router.history.go(-1)
    },
    backConfirm () {
      // this.fileList = []
      // this.imgList = []
      this.$router.history.go(-1)
    },
    back () {
      if (this.isSend === false) {
        Toast('图片上传中，请稍后')
        return false
      } else if (this.imgList.length > 0) {
        this.backShow = true
      } else {
        this.$router.history.go(-1)
        // this.fileList = []
        // this.imgList = []
      }
    },
    // 检验金额输入
    JianYanPriceKeyup () {
      var price = 0
      this.jianYanList.forEach(function (curr, index, arr) {
        price += Number(curr.money)
      })
      console.log(price)
      this.inspermoney = '￥' + price
    },
    // 检查 金额按下
    PriceKeyup () {
      var JCprice = 0
      this.jianChaList.forEach(function (curr, index, arr) {
        JCprice += Number(curr.money)
      })
      this.checkmoney = '￥' + JCprice
    },
    userHistoryJC () {
      this.$router.push({path: '/checkData', query: {'userid': this.PATIENT_USER_ID, 'myUserid': this.userid, isJianCha: true, 'morz': '0', isEdit: 0}})
    },
    userHistoryJY () {
      this.$router.push({path: '/checkData', query: {'userid': this.PATIENT_USER_ID, 'myUserid': this.userid, isJianCha: false, 'morz': '0', isEdit: 0}})
    },
    // 调用历史记录
    jianYanLishi (item) {
      this.$router.push({path: '/buildJianYan',
        query: {
          // 操作人id
          op_user_id: this.userid,
          // 档案人id
          data_user_id: this.PATIENT_USER_ID,
          id: item.id
        }})
    },
    // 点击检查项目查看结果
    jianChaLishi (item) {
      this.$router.push({path: '/buildCheckData',
        query: {
          // 操作人id
          op_user_id: this.userid,
          // 档案人id
          data_user_id: this.PATIENT_USER_ID,
          morz: 0,
          isJianCha: true,
          id: item.id
        }})
    },
    // 检查选择当前行
    jianChaSel (item, index) {
      if (item.show) {
        // 新增按钮展示
        item.show = false
        this.isJCdelBtn = false
      } else {
        for (var i = 0; i < this.jianChaList.length; i++) {
          this.jianChaList[i].show = false
        }
        // 删除按钮展示
        item.show = true
        this.isJCdelBtn = true
        this.JCdelIndex = index
      }
    },
    // 检查删除确认按钮
    ChadelConfirm () {
      this.jianChaList.splice(this.JCdelIndex, 1)
      this.PriceKeyup()
      this.isJCdelBtn = false
    },
    // 检验新增
    addJianYan () {
      this.$router.push({path: '/buildJianYan',
        query: {
          // 操作人id
          op_user_id: this.userid,
          // 档案人id
          data_user_id: this.PATIENT_USER_ID,
          morz: 0,
          isJianCha: false
        }})
    },
    // 点击检查按钮
    addJianCha () {
      this.$router.push({path: '/buildCheckData',
        query: {
          // 操作人id
          op_user_id: this.userid,
          // 档案人id
          data_user_id: this.PATIENT_USER_ID,
          morz: 0,
          isJianCha: true
        }})
    },
    // 点击头部菜单
    clickMenu (index) {
      this.menuIndex = index
    },
    // 删除图片
    Delete (file, detail) {
      this.imgList.splice(detail.index, 1)
    },
    // 删除之前
    beforeDel (detail) {
      if (this.isSend === true) {
        return true
      } else {
        Toast('请上传完之后再进行操作')
        return false
      }
    },
    // 上传
    updateFile (file) {
      this.fileUpload(file, 0)
    },
    // 上传图片请求操作
    fileUpload (file, i) {
      if (file.length === undefined) {
        this.isSend = false
        file.status = 'uploading'
        file.message = '正在上传中...'
        if (file.file !== undefined) {
          lrz(file.file, {
            width: 2000,
            quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
          })
            .then((rst) => {
              // this.$http.TWfileUpload({base64: rst.base64})
              this.$http.img({base64: rst.base64, type: 4})
                .then(res => {
                  console.log(res)
                  if (res.data.status === 'success') {
                    this.imgList.push(res.data.data)
                    this.isSend = true
                    file.status = ''
                    file.message = ''
                  }
                })
                .catch(err => {
                  console.log(err)
                })
            })
            .catch((error) => {
              console.log('失败', error)
              // this.fileUpload(file[i].content, file, i)
              // 失败时执行
            })
        } else {
          lrz(file, {
            width: 2000,
            quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
          })
            .then((rst) => {
              this.$http.img({base64: rst.base64, type: 4})
                .then(res => {
                  console.log(res)
                  if (res.data.status === 'success') {
                    this.imgList.push(res.data.data)
                    this.isSend = true
                    file.status = ''
                    file.message = ''
                  }
                })
                .catch(err => {
                  console.log(err)
                })
            })
            .catch((error) => {
              console.log('失败', error)
              // this.fileUpload(file[i].content, file, i)
              // 失败时执行
            })
        }
      } else {
        if (i === file.length) { //  || this.fileList.length > 8
          this.isSend = true
          return false
        }
        this.isSend = false
        if (i === 0) {
          for (var j = 0; j < file.length; j++) {
            file[j].status = 'uploading'
            file[j].message = '正在上传中...'
          }
        }
        lrz(file[i].file, {
          width: 2000,
          quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
        })
          .then((rst) => {
            this.$http.img({base64: rst.base64, type: 4})
              .then(res => {
                console.log(res)
                if (res.data.status === 'success') {
                  this.imgList.push(res.data.data)
                  file[i].status = ''
                  file[i].message = ''
                  i++
                  this.fileUpload(file, i)
                }
              })
              .catch(err => {
                console.log(err)
              })
          })
          .catch((error) => {
            console.log('失败', error)
          })
      }
    }
  },
  destroyed () {
    // var obj = {
    //   jianChaList: this.jianChaList,
    //   jianYanList: this.jianYanList,
    //   menuIndex: this.menuIndex,
    //   fileList: this.fileList,
    //   imgList: this.imgList,
    //   checkmoney: this.checkmoney,
    //   inspermoney: this.inspermoney,
    //   isJYdelBtn: this.isJYdelBtn,
    //   isJCdelBtn: this.isJCdelBtn
    // }
    // sessionStorage.setItem('tuWenData', JSON.stringify(obj))
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  .top{
    position: sticky;
    top: 0;
    background: white;
  }
  header{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    box-shadow: 0px 1px 0px 0px #E5E5E5;
  }
  .menu{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
  }
  .menu ul{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1DA4F2;
    border-radius: 15px;
    /*overflow: hidden;*/
  }
  .menu ul li{
    width: 90px;
    height: 29px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .select{
    background: #1DA4F2;
    color: white;
  }
  .div{
    /*width: 33%;*/
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(1){
    width: 20%;
  }
  .div:nth-child(2){
    width: 60%;
    justify-content: center;
  }
  .div:nth-child(3){
    width: 20%;
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .solid{
    color: #1DA4F2;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin-right: 5px;
    margin-top: 2px;
  }
  .title{
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    box-sizing: border-box;
    background: white;
    font-family: "PingFang SC";
  }
  .imgDiv{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    background: #fff;
  }
  .tishi{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 1.8;
    background: #fff;
  }
  .content4{}
  .content4 table{
    background: white;
    margin: 0 auto;
  }
  .table_all{
    width: 95%;
    margin: 5px auto 120px auto;
    border: 1px solid #E5E5E5;
    border-bottom: none;
  }
  .table_top tr th{
    height: 35px;
    background: #1DA4F2;
    font-size: 11px;
    color: white;
    border-left: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
  }
  .table_bottom{
    overflow: auto;
  }
  .table_bottom tr td{
    background: white;
    font-size: 11px;
    border-left: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
  }
  th:nth-child(1),
  tr td:nth-child(1) {
    width: 10%;
  }
  th:nth-child(2),
  tr td:nth-child(2) {
    width: 10%;
  }
  th:nth-child(3),
  tr td:nth-child(3) {
    width: 30%;
  }
  th:nth-child(4),
  tr td:nth-child(4) {
    width: 15%;
  }
  th:nth-child(5),
  tr td:nth-child(5) {
    width: 25%;
  }
  table td {
    padding: 8px;
    text-align: center;
    overflow: hidden;
    /*box-sizing: border-box;*/
  }
  .addBtn{
    width: 95%;
    height: 44px;
    border-radius: 20px;
    /*margin: auto 20%;*/
    margin: 0 auto;
    border: none;
    /*background: #1DA4F2;*/
    color: #fff;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    /*position: fixed;*/
    /*bottom: 60px;*/
  }
  .diaoyongImg{
    width: 15px;
    height: 15px;
  }
  .bottom{
    width: 100%;
    height: 44px;
    position: fixed;
    bottom: 0;
    background: #fff;
  }
  .bottom .botttom_div{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    background: #fff;
    font-size: 13px;
  }
  .botttom_div{
    display: flex;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
    /*justify-content: center;*/
  }
  .price{
    color: #E3170D;
    font-size: 17px !important;
  }
</style>
